<template>
  <button @click="onClick">点击</button>
  <!-- <div @click="emit('update:modelValue', 'hi vue3！')">{{ modelValue }}</div> -->
  <input v-model="newValue" />
  <div>child</div>
  <div>child</div>
  <slot name="content" msg="hello vue3!"></slot>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

// const emit = defineEmits(['someEvent'])
const emit = defineEmits(['update:modelValue', 'someEvent'])
const props = defineProps(['modelValue'])
// const msg = ref('hello vue3!')

// function change() {
//   msg.value = 'hi vue3!'
//   console.log(msg.value)
// }
// 属性或方法必须暴露出去，父组件才能使用
// defineExpose({ msg, change })
function onClick() {
  emit('someEvent', 'child message')
}
const newValue = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})
</script>
